<script type="text/javascript">
    $(".back-btn").tap(function(e){
        e.preventDefault();
        redirect_back();
    });
    
    //normalScroll("list_control");
    
    $(".button").tap(function(){
        var data_id = "popup_"+$(this).parent().find("input").attr("id");
        new POPUP().dialog({
            id:data_id,
            header:"Nhập mã xác nhận",
            text:"<input type='text' /><h5>Mã xác nhận: 999</h5>",
            height:"155px",
            buttons:{"btn1":{id:"btnConfirm",text:"Xác nhận"},"btn2":{id:"btnCancel",text:"Thoát"}}
        });
        $("#"+data_id).find("input").focus();
        $(".dialog").tap(function(){
            $("#"+data_id).find("input").focus();
        });
        confirm();
    });
    
    function confirm(){
        $("#btnConfirm").tap(function(){
            /*var id = $(this).parents(".dialog").attr("id");
            var isChecked = $("#"+id.replace("popup_", "")+":checked").val();
            if(isChecked!=1){
                $("#"+id.replace("popup_", "")).prop("checked");
            }else{
                $("#"+id.replace("popup_", "")).removeAttr("checked");
            }*/
            new POPUP().closeDialog();
        });
    }
    var ww = $(window).width()-18;
    var hh = $(window).height() - (44 + 110 + 170) - 40;
    $("#chart1").css({
        width: ww+"px",
        height: hh+"px"
    });
   
</script>
<section class="header">
    <a class="back-btn btn-1">Back</a>
    <div>
        <h3 class="title">Đã tắt lúc</h3>
        <p>3.40 PM, 02/02/2014</p>
    </div>
    <a class="refresh-btn btn-2"></a>
</section>
<section class="content">
    <div class="image-info">
        <img src="public/images/timthumb.jpg"/>
        <div class="head-info">
            <h4>CNK B11 (Đang tắt)</h4>
            <p>Phòng Chủ Nhiệm Khoa B11</p>
        </div>
        <div class="swich">
            <div class="swich_on">

            </div>
            <div class="swich_off">

            </div>
        </div>
    </div>
    <div class="info">
        <h2>Thông tin</h2>
        <p><label>Điều khiển </label><span><button class="button">Bật</button></span></p>
        <p><label>P tức thời</label><span>5 kW</span></p>
        <p><label>Công suất tiêu thụ tháng 1</label><span>50 kWh</span></p>
        <p><label>Tổng công suất tiêu thụ năm 2014</label><span>250 kWh</span></p>
        
        <h2  class="custom_info">Biểu đồ phụ tải(kW)</h2>
        <span class="select">
            <select><option>2014</option></select>
        </span>
    </div>
    <div id="chart1"></div>
</section>
<section class="footer">
    Hệ thống giám sát và điều khiển hệ thống điện BV 354
</section>
<style type="text/css">
 .jqplot-y2axis,.jqplot-yaxis{}
 .jqplot-yaxis{
     left: -7px!important;
     text-align: center;
 }
 .jqplot-yaxis div{
     display: inline-block;
     left: 0px;
     width: 19px;
     color: #D9251A;
 }
 #chart1{
     left: 15px;
 }
</style>
<script>
    var line2 = [['1', 42], ['2', 56], ['3', 39], ['4', 81],['5',44],['6',77],['8',66],['9',66],['10',66],['11',66],['12',66]];
 
    var plot2 = $.jqplot('chart1', [line2], {
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                label: '',
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    // labelPosition: 'middle',
                    angle: 1
                }
           
            },
            yaxis: {
                label: '',
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer
            }
        }
    });
</script>